<template>
    <rx-layout>
        <div slot="left" style="width: 320px;padding:4px;border-top:solid 1px #ccc">
            <div>
                <a-input-search style="width:200px" :placeholder="i18n('form.searchInterface','搜索接口')" v-model="searchValue"/>
                <a-button type="primary" style="margin-left: 5px;" @click="toClassification">
                    {{i18n('form.addClassification','添加分类')}}
                </a-button>
            </div>
            <template v-if="interfaceData.length > 0">
                <sys-interface-category-treeeditor
                    :interfaceData="interfaceData"
                    :expandedKeys="expandedKeys"
                    :selectedKeys="selectedKeys"
                    :searchValue="searchValue"
                    :projectId="projectId"
                    @expand="onExpand"
                    @handSelect="handSelect"
                ></sys-interface-category-treeeditor>
            </template>
        </div>
        <div slot="center" style="padding:2px;border-top:solid 1px #ccc">
            <sys-interface-api-list ref="apiList" v-if="isShowList"
            :classifications="classificationOptions" :projectId="projectId" :classificationId="classificationId"
            />
            <a-tabs class="tabColumn" v-if="isShowForm" v-model="formTabKey">
                <a-tab-pane key="preview" :tab="$ti18('rxList.previews','预览')">
                    <sys-interface-api-preview v-if="formTabKey=='preview'" :pkId="curApiId" />
                </a-tab-pane>
                <a-tab-pane key="edit" :tab="$ti18('rxList.editBtn','编辑')" force-render>
                    <sys-interface-api-edit :pkId="curApiId" :projectId="projectId" :basePath="basePath" />
                </a-tab-pane>
            </a-tabs>
        </div>
    </rx-layout>
</template>

<script>
    import SysInterfaceCategoryTreeeditor from "./SysInterfaceCategoryTreeeditor";
    import SysInterfaceClassificationEdit from "./SysInterfaceClassificationEdit";
    import SysInterfaceClassificationApi from "@/api/system/core/sysInterfaceClassification";
    import SysInterfaceApiList from "./SysInterfaceApiList";
    import SysInterfaceApiEdit from "./SysInterfaceApiEdit";
    import SysInterfaceApiPreview from "./SysInterfaceApiPreview";
    import SysInterfaceApiApi from "@/api/system/core/sysInterfaceApi";
    import SysInterfaceProjectApi from "@/api/system/core/sysInterfaceProject";
    import {Util} from "@lowcode/jpaas-common-lib";
    export default {
        name: "SysInterfaceApiInfo",
        components:{
            SysInterfaceCategoryTreeeditor,
            SysInterfaceApiList,
            SysInterfaceApiEdit,
            SysInterfaceApiPreview
        },
        data(){
          return {
              projectId: '',
              basePath: '',
              classificationId:'',
              interfaceData:[{title:this.i18n('form.fullInterface','全部接口'),key:'all',value:'all',parentId:'-1',slots: {icon:'smile'}}],
              classificationOptions:[],
              expandedKeys:[],
              selectedKeys:[],
              searchValue:'',
              isShowList:false,
              isShowForm:false,
              curApiId:'',
              formTabKey:'preview'
          }
        },
        created() {
            var self_ = this;
            this.$bus.on("apiLoadEvent", () => {
                self_.interfaceData.splice(1, self_.interfaceData.length - 1);
                self_.loadClassify();
            });
            this.$bus.on("apiFormLoadEvent", (key, classificationId) => {
                self_.setSelectedKey(key);
                self_.setExpandedKeys(classificationId);
                //key:接口ID
                self_.onSelect(key);
            })
            this.$bus.on("apiTableLoadEvent", (key) => {
                self_.setSelectedKey(key);
                //key:分类ID
                self_.onTableSelect(key);
            })
        },
        methods:{
            i18n(name, text, key) {
                return this.$ti18(name, text, "sysInterfaceProject", key);
            },
            setData(pkId){
                SysInterfaceProjectApi.get(pkId).then(res=> {
                    if (res.success && res.code == 200) {
                        var data = res.data;
                        this.projectId=data.projectId;
                        this.basePath=data.basePath;
                        var self_=this;
                        this.loadClassify(function(){
                            self_.setSelectedKey('all');
                            self_.onTableSelect('all');
                        });
                    }
                })

            },
            setSelectedKey(key){
                this.selectedKeys.splice(0,this.selectedKeys.length);
                this.selectedKeys.push(key);
            },
            setExpandedKeys(key){
                if(this.expandedKeys.includes(key)){
                    this.expandedKeys.splice(this.expandedKeys.indexOf(key),1);
                }
                this.expandedKeys.push(key);
            },
            onExpand(expandedKeys){
                this.selectedKeys.splice(0,this.selectedKeys.length);
                this.expandedKeys.splice(0,this.expandedKeys.length);
                this.expandedKeys.push(...Util.deepClone(expandedKeys));
            },
            handSelect(curRow){
                var parentId=curRow.parentId;
                if(parentId != "-1"){
                    this.onSelect(curRow.key);
                }else{
                    this.onTableSelect(curRow.key);
                }
            },
            toClassification(){
                var conf = {
                    component: SysInterfaceClassificationEdit,
                    curVm: this,
                    widthHeight: ['800px','400px'],
                    title: this.i18n('form.addClassification','添加分类'),
                    data:{
                        projectId:this.projectId
                    }
                }
                var self_ = this;
                Util.open(conf, function(action) {
                    if(action != 'ok') {
                        return;
                    }
                    var id = this.resultData.classificationId;
                    self_.interfaceData.push({title: this.resultData.classificationName,treeId:id, key:id, value:id, parentId:"-1" ,slots:{ icon: 'smile'}, children:[]});
                });
            },
            //获取该项目里的所有分类
            loadClassify(callback){
                var self_ = this;
                self_.interfaceData=[{title:this.i18n('form.fullInterface','全部接口'),key:'all',value:'all',parentId:'-1',slots: {icon:'smile'}}];
                SysInterfaceClassificationApi.queryByProjectId(this.projectId).then(data => {
                    if(data && data.length > 0){
                        data.forEach(function (item,index) {
                            if(index == 0){
                                self_.setExpandedKeys(item.classificationId);
                            }
                            var id = item.classificationId;
                            self_.interfaceData.push({title: item.classificationName,treeId:id, key:id, value:id, parentId:"-1" ,slots:{ icon: 'smile'}, children:[]});
                        })
                        self_.classificationOptions=data;
                        if(callback){
                            callback();
                        }
                        self_.loadInterface();
                    }
                })
            },
            //获取该分类里的所有接口
            loadInterface(){
                var self_ = this;
                SysInterfaceApiApi.queryByProjectId(this.projectId).then(data => {
                    if(data && data.length > 0){
                        for (let i = 0; i < self_.interfaceData.length; i++) {
                            var classify = self_.interfaceData[i];
                            var childrenArr = [];
                            for (let j = 0; j < data.length; j++) {
                                var interfaceObj = data[j];
                                if(classify.key == interfaceObj.classificationId){
                                    childrenArr.push(interfaceObj);
                                }
                            }
                            if(childrenArr.length > 0){
                                Util.listToTree(childrenArr,"apiId","classificationId");
                                Util.genTreeData(childrenArr,"apiName","apiId","apiId");
                                classify.children = childrenArr;
                            }
                        }
                    }
                });
            },
            onTableSelect(key){
                this.setSelectedKey(key);
                if(key!='all') {
                    this.classificationId=key;
                }else{
                    this.classificationId='';
                }
                this.isShowList=true;
                this.isShowForm=false;
            },
            onSelect(key){
                this.formTabKey='preview';
                this.setSelectedKey(key);
                this.curApiId=key;
                this.isShowList=false;
                this.isShowForm=true;
            }
        }
    }
</script>

<style scoped>

</style>